import React from "react";
import { ResultPage, Toast } from "antd-mobile";
import { AlipayCircleFill } from "antd-mobile-icons";
import { getPay } from "../../api/info";
import { useLoaderData, useNavigate } from "react-router-dom";
function Index() {
  let { info } = useLoaderData();
  const details = [
    {
      label: "火车票",
      value: "￥" + info.order_info.total,
      bold: true,
    },
    {
      label: "付款方式",
      value: "账户余额",
    },
  ];
  let nav = useNavigate();
  const onSecondaryButtonClick = () => {
    nav("/");
  };
  const onPrimaryButtonClick = () => {
    nav("/pays", { state: info });
  };
  return (
    <div>
      <ResultPage
        status="waiting"
        title={<div style={{ fontSize: 15 }}>支付成功</div>}
        description={
          <div>
            <span style={{ fontSize: 32, color: "#ffffff", marginRight: 4 }}>
              ¥
            </span>
            <span style={{ fontSize: 48, color: "#ffffff" }}>
              {info.order_info.total}
            </span>
          </div>
        }
        icon={<AlipayCircleFill />}
        details={details}
        secondaryButtonText="首页"
        onSecondaryButtonClick={onSecondaryButtonClick}
        primaryButtonText="订单详情"
        onPrimaryButtonClick={onPrimaryButtonClick}
      ></ResultPage>
    </div>
  );
}

export default Index;
export const loader = async ({ request }) => {
  let url = new URL(request.url);
  let obj = Object.fromEntries(url.searchParams);
  console.log(obj);

  let { data: info } = await getPay(obj.out_trade_no);
  return { info };
};
